<template>
	<view>
		<cu-custom bgColor="bg-blue" :isBack="true"><block slot="content">{{title}}</block></cu-custom>
		<view class="bg-white" >
			<swiper class="card-swiper square-dot" :indicator-dots="true" :circular="true"
			 :autoplay="true" interval="5000" duration="500" @change="cardSwiper" indicator-color="#8799a3"
			 indicator-active-color="#0081ff" style="min-height: 700upx;">
				<swiper-item v-for="(item,index) in desc.adimages_text" :key="index" :class="cardCur==index?'cur':''">
					<view class="swiper-item">
						<image :src="item" mode="widthFix"></image>
					</view>
				</swiper-item>
			</swiper>
			<view class="padding-left-sm padding-tb-xs text-lg text-ablack">
				<text class="text-ablack">{{desc.name}}</text>
				<text class="fr text-sm text-gray padding-sm">剩余:{{desc.stock}}</text>
			</view>
			<view style="clear: both;"></view>
			<view class="padding-left-sm padding-tb-xs text-lg text-ablack">
				<text class="text-red">{{desc.price}}碎片</text>
				<text class="fr text-sm text-gray padding-sm">每日最大购买:{{desc.max_limit}}|今日已购买:{{desc.buyed}}</text>
			</view>
			<view style="clear: both;"></view>
		</view>
		<view class="bg-white margin-top">
			<view class="padding-left-sm padding-tb-xs text-lg text-ablack">
				<text class="text-ablack">商品详情</text>
			</view>
			<view v-html="desc.content"></view>
			<view style="width: 100%;height: 40upx;"></view>
		</view>
		<view style="width: 100%;height: 140upx;"></view>
		<view class="padding bg-white" style="position: fixed;bottom: 0;width: 100%;">
			<button class="cu-btn bg-blue lg" style="width: 90%;margin-left: 5%;" @click="dobuy()">立刻兑换</button>
		</view>
		<view class="cu-modal bottom-modal" :class="modalName=='bottomModal'?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white">
					<view class="action text-gray" @tap="hideModal">取消</view>
				</view>
				<view class="padding bg-white">
					<view class="cu-form-group">
						<view class="title" style="width: 45%;">数量:</view>
						<view class="flex" style="justify-content:center">
							<view class="text-ablack bg-gray flex" 
							style="border-radius: 5upx;justify-content:center;align-items:center;width: 60upx;height: 60upx;"
							@click="delnum()"
							>-</view>
							<view  style="width: 40%;padding-top: 15upx;">
								<input type="number" v-model="changenum"/>
							</view>
							<view class="text-ablack bg-gray flex" 
							style="border-radius: 5upx;justify-content:center;align-items:center;width: 60upx;height: 60upx;"
							@click="addnum()"
							>+</view>
						</view>
						<view class="bg-blue padding-sm" style="width: 20%;border-radius: 5upx;" @click="doexchange()">兑换</view>
					</view>
				</view>
			</view>
		</view>
		<view class="cu-load load-modal" v-if="loadModal">
			<image src="/static/icon.jpg" mode="aspectFit"></image>
			<view class="gray-text">加载中...</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				Imgbase:getApp().globalData.Imgbase,
				title:'',
				did:0,
				desc:'',
				loadModal: false,
				cardCur: 0,
				modalName: null,
				changenum:1,
			};
		},
		onLoad: function (options) {
			this.did = options.id;
			this.loadDesc(this.did);
		},
		onShow() {
		},
		methods: {
			doexchange(){
				let _this = this;
				if(this.changenum <= 0){
					uni.showToast({
						icon: 'none',
						title: '兑换数量不能为0'
					});
					this.changenum = 1;
					return;
				}
				if(this.changenum > this.desc.max_limit){
					uni.showToast({
						icon: 'none',
						title: '兑换数量不能该商品每天最大兑换数量'+this.desc.max_limit+'个'
					});
					this.changenum = 1;
					return;
				}
				var couldbuy = this.desc.max_limit - this.desc.buyed;
				if(this.changenum > couldbuy){
					uni.showToast({
						icon: 'none',
						title: '超过最大兑换数量,您今天还可以兑换'+couldbuy+'个'
					});
					this.changenum = 1;
					return;
				}
				uni.showModal({
					title: '提示',
					content: '您确定要花费'+_this.changenum*_this.desc.price+'碎片兑换'+_this.changenum+'个'+_this.desc.name+'吗',
					success: function (res) {
						if (res.confirm) {
							_this.loadModal = true;
							uni.request({
								url: _this.$globals.apibase+'/api/Shop/exchangeGood',
								data: {
									token: uni.getStorageSync('token'),
									id: _this.desc.id,
									number:_this.changenum
								},
								method: 'POST',
								header: {
									'content-type': 'application/json'
								},
								success: (res) => {
									if(res.data.code == '401'){
										uni.setStorageSync('token', '');
									}
									if(res.data.code == '1'){
										console.log(res.data.data.state);
										if(res.data.data.state == '0'){
											uni.showToast({
												icon: 'none',
												title: res.data.msg
											});
										}
										if(res.data.data.state == '1'){
											uni.showToast({
												icon: 'none',
												title: '兑换成功,请到赏袋中去查看'
											});
											_this.modalName = null
											_this.loadDesc(_this.did);
										}
									}
									if(res.data.code == '0'){
										uni.showToast({
											icon: 'none',
											title: res.data.msg
										});
									}
									_this.loadModal = false;
								}
							});
						} else if (res.cancel) {
						}
					}
				});
			},
			delnum(){
				if(this.changenum >0){
					this.changenum-=1;
				}
			},
			addnum(){
				this.changenum+=1;
			},
			dobuy(){
				this.modalName = 'bottomModal'
			},
			hideModal(e) {
				this.modalName = null
			},
			cardSwiper(e) {
				this.cardCur = e.detail.current
			},
			loadDesc(id){
				let _this = this;
				_this.loadModal = true;
				uni.request({
					url: _this.$globals.apibase+'/api/Shop/gooddesc',
					data: {
						token: uni.getStorageSync('token'),
						id: id,
					},
					method: 'POST',
					header: {
						'content-type': 'application/json'
					},
					success: (res) => {
						if(res.data.code == '401'){
							uni.setStorageSync('token', '');
						}
						if(res.data.code == '1'){
							_this.desc = res.data.data.desc;
							_this.title = _this.desc.name;
						}
						if(res.data.code == '0'){
							uni.showToast({
								icon: 'none',
								title: res.data.msg
							});
						}
						_this.loadModal = false;
					}
				});
			},
		},
	}
</script>

<style>
</style>
